<template>
	<view class="updateSchedule">
		<view class="updateSchedule-label">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#49bdfb"></uni-segmented-control>
		</view>
		<view class="updateSchedule-info">
			<!-- 日程信息 -->
			<uni-forms ref="form" :rules="rules" :modelValue="scheduleData">
				<uni-card>
					<view>
						<text style="font-size: 15px;">标题：{{scheduleData.title}}</text>
					</view>
					<view>
						<text style="font-size: 15px;">开始时间：{{scheduleData.beginTime}}</text>
					</view>
					<view>
						<text style="font-size: 15px;">结束时间：{{scheduleData.endTime}}</text>
					</view>
				</uni-card>
				<uni-card>
					<view>
						<text style="font-size: 15px;">地点：{{scheduleData.location}}</text>
					</view>
					<view>
						<text style="font-size: 15px;">备注：{{scheduleData.memo}}</text>
					</view>
					
				</uni-card>
				<uni-card>
					<view>
						<text style="font-size: 15px;">提醒：{{scheduleData.remind}}</text>
					</view>
					<view>
						<text style="font-size: 15px;">重复：{{scheduleData.frequency}}</text>
					</view>
					<view>
						<text style="font-size: 15px;">重复结束：{{scheduleData.repeatEndTime}}</text>
					</view>
				</uni-card>

				<button v-if="scheduleData.label=='活动日程'" type="primary" plain="true" style="margin: 0 18px 0 18px ;height: 32px; font-size: 50%;"
					@click="navToActivity">跳转到活动详情</button>
				<view class="updateSchedule-button">
					<button type="primary" @click="edit" plain="true" class="updateSchedule-submit"
						size="mini">编辑</button>
					<button type="primary" @click="deleteSchedule" plain="true" class="updateSchedule-submit"
						size="mini">删除</button>
				</view>
			</uni-forms>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message type="top" message="请检查日程结束时间是否小于开始时间" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>
<script>
	/* 时间戳转换成日期格式 */
	function formatDate(value) {
		if (value == undefined) {
			return;
		}
		// let date = new Date(value * 1000);
		let date = new Date(value);
		//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		let y = date.getFullYear();
		let MM = date.getMonth() + 1;
		MM = MM < 10 ? ('0' + MM) : MM; //月补0
		let d = date.getDate();
		d = d < 10 ? ('0' + d) : d; //天补0
		let h = date.getHours();
		h = h < 10 ? ('0' + h) : h; //小时补0
		let m = date.getMinutes();
		m = m < 10 ? ('0' + m) : m; //分钟补0
		let s = date.getSeconds();
		s = s < 10 ? ('0' + s) : s; //秒补0
		return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
	}
	/* 日期增加 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			const currentDate = this.getDateType({
				format: true
			})
			return {
				uid: 1,
				id: 0,
				apiUrl: "http://localhost:8080/",
				items: [],
				current: 0,
				defaultBeginTime: '',
				defaultEndTime: '',
				/* 日程数据 */
				scheduleData: {
					uid: 0,
					title: '',
					beginTime: '',
					endTime: '',
					remind: '',
					frequency: '',
					repeatEndTime: '',
					location: '',
					memo: '',
					label: '',
					activityId: 0,
				},
				/* 校验规则 */
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '日程名称不能为空'
						}]
					},
					scheduleEndTime: {
						rules: [{
							validateFunction: function(rule, value, data, callback) {
								if (value < this.defaultBeginTime) {
									callback('日程结束时间要大于开始时间')
								}
								return true
							}
						}]
					}

				},
				/* 重复选择 */
				value: 0,
				remindRange: [{
						value: 0,
						text: "不提醒"
					},
					{
						value: 1,
						text: "日程发生时"
					},
					{
						value: 2,
						text: "15分钟前"
					},
					{
						value: 3,
						text: "30分钟前"
					},
					{
						value: 4,
						text: "一个小时前"
					},
				],
				/* 重复 */
				frequencyRange: [
					['每'],
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
					['天', '周', '月', '年']
				],
				frequencyIndex: [0, 0, 0],
				/* 重复结束 */
				date: currentDate,
			};
		},
		created() {},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
			console.log(this.scheduleData);
			console.log(this.value)
		},
		onLoad(option) {
			this.id = option.id
			this.getSchedule()
		},
		onShow() {
			this.getSchedule()
		},
		computed: {
			startDate() {
				return this.getDateType('start');
			},
			endDate() {
				return this.getDateType('end');
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.scheduleData.label = this.items[this.current];
				}
			},
			edit() {
				uni.navigateTo({
					url: '/pages/mine/updateSchedule?id=' + this.id
				});
			},
			processSchedule() {
				this.id = this.scheduleData.id
				this.uid = this.scheduleData.uid
				var date = this.scheduleData.beginTime
				this.defaultBeginTime = Date.parse(new Date(date))
				date = this.scheduleData.endTime
				this.defaultEndTime = Date.parse(new Date(date))
				var label = this.scheduleData.label
				this.items[0] = label
				var frequency = this.scheduleData.frequency
				var times = frequency.substring(1, 2)
				for (var i = 0; i < this.frequencyRange[1].length; i++) {
					if (times == this.frequencyRange[1][i]) {
						this.frequencyIndex[1] = i
					}
				}
				var unit = frequency.substring(2, 3)
				for (var i = 0; i < this.frequencyRange[2].length; i++) {
					if (this.frequencyRange[2][i] == unit) {
						this.frequencyIndex[2] = i
					}
				}
				var remind = this.scheduleData.remind
				console.log(remind)
				for (var i = 0; i < this.remindRange.length; i++) {
					if (this.remindRange[i].text == remind) {
						this.value = this.remindRange[i].value
					}
				}
				this.date = this.scheduleData.repeatEndTime
			},
			getSchedule() {
				/* 获取当前日程信息 */
				var url = ''
				url = this.apiUrl + 'schedule/' + this.id
				uni.request({
					url: this.apiUrl + 'schedule/' + this.id,
					method: 'GET',
					success: (res) => {
						console.log('请求远程天数据')
						this.scheduleData = res.data
						this.processSchedule()
						uni.setStorageSync(this.id + 'schedule', this.scheduleData)
					},
					fail: (err) => {
						console.log('请求本地天数据')
						this.scheduleData = uni.getStorageSync(this.id + 'schedule');
						this.processSchedule()
						console.log(this.scheduleData)

					}
				});
			},
			deleteSchedule() {
				console.log("删除日程", this.id)
				uni.request({
					url: this.apiUrl + 'schedule/' + this.id,
					method: 'DELETE',
					success: (res) => {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						uni.navigateBack({
							delta: 1
						});
					},
					fail: (err) => {
						uni.showModal({
							title: '删除失败',
						})
					}
				});

			},
			changeBegin(e) {
				this.scheduleData.beginTime = e;
			},
			changeEnd(e) {
				this.scheduleData.endTime = e;
			},
			remindChange(e) {
				this.value = e
				this.scheduleData.remind = this.remindRange[e].text;
			},
			frequencyChange(e) {
				var column = e.detail.column;
				var value = e.detail.value;
				this.frequencyIndex[column] = value;
				this.scheduleData.frequency = this.frequencyRange[0][this.frequencyIndex[0]] + this.frequencyRange[1][this
					.frequencyIndex[1]
				] + this.frequencyRange[2][this.frequencyIndex[2]];
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.scheduleData.repeatEndTime = e.detail.value
			},
			getDateType(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate() + 1;

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			navToActivity() {
				if (this.scheduleData.label == "活动日程" && this.scheduleData.activityId != 0) {
					uni.navigateTo({

					})
				} else {
					uni.showToast({
						icon: 'none',
						title: `无法跳转`
					})
				}
			}
		}
	};
</script>

<style>
	.updateSchedule-label {
		margin: auto 30rpx;
	}

	.updateSchedule-submit {
		width: 310rpx;
		margin: 30rpx;
		margin-bottom: 30px;
	}
</style>
<style lang="scss">
	.updateSchedule-info {
		padding: 1px;
		background-color: #fff;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.updateSchedule {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>
